<template>
  <div class="bmi-view-container">
    <bmi-echart-height
      v-if="heightLineValues.length>0"
      :begin-index="beginIndex"
      :end-index="endIndex"
      :month-base-values="monthBaseValues"
      :line-names="heightLineNames"
      :line-values="heightLineValues"
      :actual-month="actualMonth"
      :height="actualHeight"
    />
    <div class="chart-hint" style="margin-bottom: 10px;">
      {{ heightConclusion }}
    </div>

    <div class="ling-view" style="margin-bottom: 10px;" />

    <bmi-echart-weight
      v-if="weightLineValues.length>0"
      :begin-index="beginIndex"
      :end-index="endIndex"
      :month-base-values="monthBaseValues"
      :line-names="weightLineNames"
      :line-values="weightLineValues"
      :actual-month="actualMonth"
      :weight="actualWeight"
    />
    <div class="chart-hint">{{ weightConclusion }}</div>

  </div>
</template>

<script>
import BmiEchartHeight from './bmiEchartHeight'
import BmiEchartWeight from './bmiEchartWeight'

export default {
  name: 'BmiView',
  components: {
    BmiEchartHeight,
    BmiEchartWeight
  },

  props: {
    bmi: {
      type: Object,
      default () {
        return {}
      }
    },

    birthday: {
      type: String,
      default () {
        return ''
      }
    },
    height: {
      type: String,
      default () {
        return ''
      }
    },
    weight: {
      type: String,
      default () {
        return ''
      }
    },
    name: {
      type: String,
      default () {
        return ''
      }
    }
  },

  data () {
    return {
      monthBaseValues: [],
      heightLineValues: [],
      weightLineValues: [],
      heightConclusion: '',
      weightConclusion: '',
      heightLineNames: [],
      weightLineNames: [],
      actualMonth: [],
      actualHeight: [],
      actualWeight: [],

      beginIndex: 0,
      endIndex: 0
    }
  },

  created () {
    this.init()
  },

  methods: {
    init () {
      console.log(this.$props.bmi)
      this.monthBaseValues = this.$props.bmi.monthBaseValuesV2
      this.heightLineValues = this.$props.bmi.heightLineValuesV2
      this.weightLineValues = this.$props.bmi.weightLineValuesV2
      this.heightConclusion = this.$props.bmi.heightConclusion
      this.weightConclusion = this.$props.bmi.weightConclusion
      this.heightLineNames = this.$props.bmi.heightLineNamesV2
      this.weightLineNames = this.$props.bmi.weightLineNamesV2

      this.actualMonth[0] = this.$props.bmi.actualMonth
      this.actualHeight[0] = this.$props.height
      this.actualWeight[0] = this.$props.weight

      const beginIndex = 0
      let endIndex = 0
      // var monthIndex = 0;
      let monthArray = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 18, 21, 24, 30, 36, 42, 48, 54, 60, 66, 72]
      monthArray = this.monthBaseValues
      endIndex = monthArray.length - 1

      this.beginIndex = beginIndex
      this.endIndex = endIndex
    }
  }
}
</script>

<style>
  .bmi-view-container {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
  }

  .chart-hint {
    color: #333333;
    font-size: 13px;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }

  .ling-view {
    height: 10px;
    /* margin-bottom: 40rpx; */
  }
</style>
